<template>
  <div>
    <div class="main-tab" v-if="pageReady">
      <div class="sysMessage" v-if="loginStatus" @click="goMsg">
        <!--<div class="redDot" ></div>-->
        <img class="icon" src="../../../static/img/message.png" />
      </div>
      <swiper auto class="home-swiper" height="17.5rem" dots-class="custom-bottom" dots-position="center" >
        <swiper-item v-for="(item, index) in list" :key="index">
          <img style="height:100%;width:100%" :src="item.imgUrl" @click="goTargetPath(item.linkUrl)">
        </swiper-item>
      </swiper>
      <div class="home-Entrance">
        <div class="item" v-for="item in hotList" @click="go(item.path)">
          <img class="img" :src="item.icon"/>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="introduce">
        <img class="poster" src="../../../static/img/home_customer.png" />
        <x-button class="introduce-button" :gradients="['#F46A32', '#EF3226']"  :link="loginStatus?'recommend':'registrationLogin'">推荐客户</x-button>
      </div>
    </div>
    <b-tabbar :value="0" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { getSliderList, getConfig } from '@/api/home'

export default {
  name: 'home',
  components: {
    bTabbar,
  },
  data () {
    return {
      pageReady: false,
      loginStatus: false,
      list:[],
      hotList: [
        {
          icon: require('../../../static/img/query.png'),
          title: '进度查询',
          path: 'process'
        },
        {
          icon: require('../../../static/img/team.png'),
          title: '我的团队',
          path: 'team'
        },
        {
          icon: require('../../../static/img/invite.png'),
          title: '推广邀请',
          path: 'spread'
        },
        {
          icon: require('../../../static/img/good.png'),
          title: '热门产品',
          path: 'good'
        }
      ]
    }
  },
  methods:{
    goMsg () {
      if (this.loginStatus) {
        this.$router.push({ name: 'sysMsg' })
      } else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    go (path) {
      if (this.loginStatus) {
        this.$router.push({ name: path })
      } else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    goTargetPath () {
      const linkUrl = arguments[0]
      if (linkUrl.indexOf('www') !== -1) {
        window.location.href = linkUrl
      } else {
        if (this.loginStatus) {
          this.$router.push('linkUrl')
        } else {
          this.$vux.toast.text('请先登录')
          setTimeout(() => {
            this.$router.replace('registrationLogin')
          }, 1500)
        }
      }
    }
  },
  mounted() {
    if (this.globalData.cid) {
      this.loginStatus = true
    }
    const _list = sessionStorage.getItem('home_list')
    if (!_list) {
      this.$vux.loading.show({
        text: '加载中...'
      })
      getSliderList().then( data => {
        this.list = data.data
        this.pageReady = true
        this.$vux.loading.hide()
        sessionStorage.setItem('home_list', JSON.stringify(data.data))
      })
    } else {
      this.list = JSON.parse(_list)
      this.pageReady = true
    }
    if (this.$route.query.shareId) {
      this.globalData.shareId = this.$route.query.shareId
    }
  }
}
</script>

<style scoped>
.introduce-button {
  width: 16rem;
  height: 3.4rem;
  border-radius: 1.7rem;
}
</style>
